<template>
  <e-charts ref="pie" :option="option" />
</template>

<script>
import MGTAPI from '../../api/management';
export default {
  data() {
    return {
      option: {
        title: {
          text: '寻真云盘用户使用情况',
          subtext: '用户端数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '文件个数',
            type: 'pie',
            radius: '50%',
            data: []
          }
        ]
      }
    };
  },
  mounted() {
    this.getStorageStatus();
  },
  methods: {
    getStorageStatus() {
      MGTAPI.getDiskStorageStatus()
        .then(res => {
          const data = res.data.data;
          // 对获取到的数据进行处理
          const processedData = data.map(item => ({
            value: item.value,
            name: item.name
          }));
          console.log(processedData)
          // 更新option中饼图的数据
          this.option.series[0].data = processedData;
          // 利用echarts实例的refresh和resize方法重新渲染饼图
          this.$nextTick(() => {
            this.$refs.pie && this.$refs.pie.refresh();
            this.$refs.pie && this.$refs.pie.resize();
          });
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
